// 这里是放大镜实现
// 首先我们要创建一个类
class Enlarge {
    constructor(options) {
        this.ele = document.querySelector(options)
        this.show = this.ele.querySelector('.show')
        this.mask = this.ele.querySelector('.mask')
        this.list = this.ele.querySelector('.list')
        this.enlarge = this.ele.querySelector('.enlarge')
        this.picture = this.enlarge.firstElementChild

        // 获取尺寸
        this.show_w = this.show.clientWidth
        this.show_h = this.show.clientHeight
        this.mask_w = parseInt(window.getComputedStyle(this.mask).width)
        this.mask_h = parseInt(window.getComputedStyle(this.mask).height)
        this.picture_w = parseInt(window.getComputedStyle(this.picture).width)
        this.picture_h = parseInt(window.getComputedStyle(this.picture).height)


        // 调用方法
        this.setScale()
        this.overOut()
        this.move()
        this.clickChange()
    }
    // 方法

    setScale() {
        console.log('计算比例');

        /* 
            mask 尺寸         x(要求的)
          -------------- =  ------------
            show 尺寸         picture 尺寸
        */
        this.enlarge_w = this.mask_w * this.picture_w / this.show_w
        this.enlarge_h = this.mask_h * this.picture_h / this.show_h

        // 进行赋值
        this.enlarge.style.width = this.enlarge_w + 'px'
        this.enlarge.style.height = this.enlarge_h + 'px'
    }
    overOut() {
        console.log('移入移出');
        // 鼠标进入
        this.show.addEventListener('mouseover', () => {
            this.mask.style.display = 'block'
            this.enlarge.style.display = 'block'
        })
        // 鼠标离开
        this.show.addEventListener('mouseout', () => {
            this.mask.style.display = 'none'
            this.enlarge.style.display = 'none'
        })

    }
    move() {
        console.log('移动联动');
        // 给show盒子添加鼠标移动事件
        this.show.addEventListener('mousemove', e => {
            // 获取坐标值
            e = e || window.event
            let x = e.offsetX - this.mask.clientWidth / 2
            let y = e.offsetY - this.mask.clientHeight / 2

            // 边界值判断
            if (x <= 0) x = 0
            if (y <= 0) y = 0
            if (x >= this.show_w - this.mask_w) x = this.show_w - this.mask_w
            if (y >= this.show_h - this.mask_h) y = this.show_h - this.mask_h

            // 赋值给mask盒子
            this.mask.style.left = x + 'px'
            this.mask.style.top = y + 'px'

            /* 
                    mask 移动距离           mask 尺寸
                --------------------- = ---------------
                    大图移动距离 x            enlarge 尺寸
            */

            this.enlarge_x = x * this.enlarge_w / this.mask_w
            this.enlarge_y = y * this.enlarge_h / this.mask_h

            // 进行赋值
            this.picture.style.left = -this.enlarge_x + 'px'
            this.picture.style.top = -this.enlarge_y + 'px'

        })

    }
    clickChange() {
        console.log('点击切换');
        // 利用事件委托添加事件
        this.list.addEventListener('click', e => {
            e = e || window.event
            let target = e.target || e.srcElement

            // 判断是不是要点击的元素
            if (target.nodeName !== 'IMG') return

            // 代码能执行到这里 说明是 img 图片
            for (let i = 0; i < this.list.children.length; i++) {
                this.list.children[i].classList.remove('active')
            }
            target.classList.add('active')

            // 实现图片切换
            // 获取自定义属性
            let showUrl = target.dataset.show
            let bgUrl = target.dataset.bg

            // 赋值给 show盒子中的图片  enlarge盒子中的图片
            this.show.firstElementChild.src = showUrl
            this.picture.src = bgUrl

        })
    }
}